<template>
    <!-- 用于显示小说内容 -->
    <div ref='book_all'>
        <div 
            v-html='bookContent' 
            class="book-txt" 
            ref="bookc"
            @click="toggleBtn()">
            这是小说的内容
        </div>
        <div class="btn-nav" v-if="btnNavShow">
            <transition></transition>
            <div class="b-nav-top">
                <router-link to='/'><div class="b-nav-btn">
                    <i class="fa fa-home"></i> 返回首页
                </div></router-link>
                <router-link to='/search'><div class="b-nav-btn">
                    <i class="fa fa-search"></i> 搜索
                </div></router-link>
            </div>
            <div class="b-nav-bottom">
                <div @click="gotoChater(chaterNow-0-1)" class="btn-chater-sub">上一章</div>
                <div class="btn-chater-list">
                    <span @click="showFontChange">字号</span>
                    <div v-if="fontChangeBtn" class="addSub">
                        <div @click="changeFont(fontSize+2)" class="add">+</div>
                        <div @click="changeFont(fontSize-2)" class="sub">-</div>
                    </div>
                </div>
                <div class="btn-chater-list">
                    <span @click="showBgChange">背景</span>
                    <div v-if="bgChangeBtn" class="bgs">
                        <div @click="changeBg(1)"  :class="['white',bgNum==1?'active':'']"></div>
                        <div @click="changeBg(2)"  :class="['blue',bgNum==2?'active':'']"></div>
                    </div>
                </div>
                <div @click="gotoChater(chaterNow-0+1)" class="btn-chater-add">下一章</div>
            </div>
        </div>
        <div class="nav-bottom">
            <div @click="gotoChater(chaterNow-0-1)" class="btn-chater-sub">上一章</div>
            <div @click="gotoChaterList" class="btn-chater-list">目录</div>
            <div @click="gotoChater(chaterNow-0+1)" class="btn-chater-add">下一章</div>
        </div>
        <div class="my-alert" ref='alert_text'> 空 </div>
    </div>

</template>

<script>
export default {
    name: 'reading',
    data() {
        return {
            bookName: '小王子', //书名
            bookId: 9999, // 书的id号
            chaterNum: 0,
            chaterNow: 1, // 现在读的章节
            bookContent: '', // 章节内容
            bgCon: require("@/assets/images/reading/bg_ypz.png"), //背景
            bgNum: 1, // 背景的编号
            alert_time: 35, // 提示弹窗消失速度
            alert_timer: null, // 提示弹窗的计时器 
            btnNavShow: false, //菜单的显示和隐藏
            fontSize: 20,
            fontChangeBtn: false, //控制字体大小菜单的显示隐藏
            bgChangeBtn: false, //控制背景菜单的显示隐藏
        }
    },
    methods: {
        myalert(str) {
            let alert_dom = this.$refs.alert_text;
            if(alert_dom != undefined){
                alert_dom.innerHTML = str;
                alert_dom.style.display = 'block';
                alert_dom.style.opacity = 0.9;
                if(this.alert_timer != null) {
                    clearInterval(this.alert_timer);
                    this.alert_timer = null;
                }
                this.alert_timer = setInterval(() => {
                    alert_dom.style.opacity -= 0.02;
                    if(alert_dom.style.opacity < 0.0001){
                        clearInterval(this.alert_timer);
                        this.alert_timer = null;
                        alert_dom.style.display = 'none';
                    }
                }, this.alert_time);
            }

        },
        gotoChater(n) {
            if(n<=0){
                this.myalert('已经是第一章');
                return;
            }
            if(n > this.chaterNum) {
                this.myalert('已经是最后一章了');
                return;
            }
            this.$router.push({path:'/reading/'+this.bookId+'/'+n+'/must'});
        },
        updata_reading() {
            if(this.$route.params.id) {
                this.bookId = this.$route.params.id;
            }
            if(this.$route.params.chaterNum) {
                this.chaterNow = this.$route.params.chaterNum;
            }

            this.$axios.get('./static/book'+this.bookId+'-'+this.chaterNow+'.json').then(response => {
                this.bookContent = response.data.content;
                this.chaterNum = response.data.chaterNum;
                this.chaterNow = response.data.chaterNow;
                this.changeFontBg();
            }, response => {
                console.log("error");
                this.myalert('网络请求错误')
            });
        },
        toggleBtn(){
            if(this.bgChangeBtn) {
                this.bgChangeBtn = false;
            } else if(this.fontChangeBtn) {
                this.fontChangeBtn = false;
            } else {
                this.btnNavShow = !this.btnNavShow;
            }
            
        },
        gotoChaterList() {
            this.$router.push('/chater_list');
        },
        changeFontBg() {
            if(this.$refs.bookc != undefined){
                this.$refs.bookc.style.fontSize = this.fontSize + 'px';
            }
            if(this.$refs.book_all != undefined){
                this.$refs.book_all.style.background = 'url('+this.bgCon+')';
            }
            
        },
        showFontChange() {
            this.bgChangeBtn = false;
            this.fontChangeBtn = !this.fontChangeBtn
        },
        changeFont(n) {
            if(14<= n && n<= 36 ){
                this.fontSize = n;
                this.changeFontBg();
            }else if(n < 14) {
                this.myalert('字体不能再小了');
            }else {
                this.myalert('字体不能再大了');
            }
        },
        showBgChange() {
            this.fontChangeBtn = false;
            this.bgChangeBtn = !this.bgChangeBtn;
        },
        changeBg(n) {
            this.bgNum = n;
            if(n==1){
                this.bgCon = require("@/assets/images/reading/bg_ypz.png");
            }else {
                this.bgCon = require("@/assets/images/reading/bg_bsl.gif");
            }
            this.changeFontBg();
        }
    },
    mounted() {
        this.updata_reading();
        this.changeFontBg();
    },
    watch:{
        "$route"(val,oldval){
            this.updata_reading();
            window.scrollTo(0,0);
        }
    },
    beforeRouteEnter(to,from,next) {
        next((_this) =>{
            let user = _this.$mycookie.getCookie('un');
            if(user == undefined){
                console.log("user == undefined");
            }
            if(user == undefined || ( user.length <= 0 ) ) {
                _this.$router.push({path:'/sign_in'})
            }
        })
    }
}
</script>

<style lang="scss" scoped>
.book-txt{
    padding: 15px;
    & /deep/ p:first-child {
        margin: 20px;
    }
    & /deep/ p {
        margin: 0;
        padding: 0;
        text-indent: 2em;
    }
}
.nav-bottom {
    display: flex;
    justify-content: space-between;
    padding: 20px;
    box-sizing: border-box;
    div {
        flex-basis: 30%;
        width: 30%;
        height: 30px;
        font-size: 20px;
        line-height: 30px;
        text-align: center;
        background-color: #ccc;
    }
}
.my-alert {
    font-size: 20px;
    background-color: black;
    color: white;
    padding: 10px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%,-50%,0);
    display: none;
    opacity: 0.8;
}
.btn-nav {
    
    color: #eee;

    .b-nav-bottom,
    .b-nav-top {
        box-sizing: border-box;
        position: fixed;
        left: 0px;
        width: 100%;
        background-color: #333;
        padding: 10px;
        display: flex;
        justify-content: space-between;
        font-size: 20px;
    }
    .b-nav-top {
        top: 0px;
    }
    .b-nav-bottom {
        bottom: 0px;
        & > div {
            position: relative;
        }
        .addSub {
            background-color: #333;
            padding: 10px;
            position: absolute;
            display: flex;
            top: 0;
            left: 50%;
            transform: translate3d(-50%,-110%,0);
            div {
                text-align: center;
                height: 30px;
                width: 30px;
                margin: 0 10px;
                background-color: #eee;
                color: black;
            }
        }
        .bgs {
            background-color: #333;
            padding: 10px;
            position: absolute;
            display: flex;
            top: 0;
            left: 50%;
            transform: translate3d(-50%,-110%,0);
            div {
                margin: 0 5px ;
                height: 26px;
                width: 26px;
                border: 4px solid #333;
                box-sizing: border-box;
            }
            .active {
                border: 4px solid rgb(87, 189, 4);
            }
            .white {
                background-image: url(../assets/images/reading/bg_ypz.png);
            }
            .blue {
                background-image: url(../assets/images/reading/bg_bsl.gif);
            }
        }
    }
    .b-nav-btn {
        color: #eee;
    }
}

</style>